<template>
  <div class="hot" ref="Hot">
    <div class="header-msg">
      <div class="header-msg-logo">
        <div class="logo"></div>
        <div class="update-Time">
          更新日期:{{ songListMsg.updateTime | getDate }}
        </div>
      </div>
    </div>
    <ul class="HotList">
      <li v-for="(item, index) in SongList" :key="item.id">
        <span :class="{ active: index < 3 }" class="Hot-index">
          <template v-if="index < 9">0</template>{{ index + 1 }}
        </span>
        <songListItem
          :item="item"
          :index="index"
          :key="item.id"
          @update:music="
            $emit('update:music', $event);
            $emit('update:playlist', SongList);
          "
          :currentMusic="$attrs.currentMusic"
          :paused="$attrs.paused"
        ></songListItem>
      </li>
      <h2 align="center" class="hotloading">
        加载中
        <span>.</span>
        <span>.</span>
        <span>.</span>
      </h2>
    </ul>
  </div>
</template>

<script>
import songListItem from "./songListItem";

export default {
  components: {
    songListItem,
  },
  data() {
    return {
      songListMsg: [],
      SongList: [],
      SongListIndex: 15,
    };
  },
  filters: {
    getDate(val) {
      return (
        new Date(parseInt(val))
          .toLocaleDateString()
          .substr(5)
          .replace("/", "月") + "日"
      );
    },
  },
  beforeCreate() {
    this.$root.isShowLoading = true;
    this.axios.get("/top/list?idx=1").then((result) => {
      // console.log(result);
      this.songListMsg = result.data.playlist;
      let tracks = result.data.playlist.trackIds
        .map((item) => item.id)
        .slice(0, 15)
        .join(",");

      this.axios

        .get("/song/detail", { params: { ids: tracks } })
        .then((result) => {
          this.SongList = result.data.songs;
          this.$root.isShowLoading = false;
        });
    });
  },
  mounted() {
    // console.log(this.$route.name!='Hot');
    // if(this.$route.name!='Hot'){

    // }
    //   return;
    var that = this;
    window.onscroll = function () {
      let Hotscroll =
        document.documentElement.clientHeight + this.pageYOffset -124;
      // console.log(Hotscroll);
      if (Hotscroll >= that.$refs.Hot.offsetHeight) {
        console.log("触底了");
        that.SongListIndex+=2;
        window.axios.get("/top/list?idx=1").then((result) => {
          // console.log(result);
          that.songListMsg = result.data.playlist;
          let tracks = result.data.playlist.trackIds
            .map((item) => item.id)
            .slice(0, that.SongListIndex)
            .join(",");

          window.axios
            .get("/song/detail", { params: { ids: tracks } })
            .then((result) => {
              that.SongList = result.data.songs;
              // this.$root.isShowLoading = false;
            });
        });
      }
    };
  },
};
</script>

<style lang="less">
.hot {
  margin-top: 125px;
}
.header-msg {
  height: 124px;
  background: url("https://s3.music.126.net/mobile-new/img/hot_music_bg_2x.jpg?f01a252389c26bcf016816242eaa6aee=")
    no-repeat left;
  background-size: 100%;
  .header-msg-logo {
    height: 100%;
    background: rgba(105, 104, 104, 0.2);
    padding-top: 1px;
    padding-left: 20px;
    .logo {
      background: url("https://s3.music.126.net/mobile-new/img/index_icon_2x.png?5207a28c3767992ca4bb6d4887c74880=")
        no-repeat -48px -60px;
      width: 142px;
      height: 69px;
      background-size: 166px 97px;
      background-position: -23px -27px;
      margin-top: 15px;
    }
    .update-Time {
      margin-top: 10px;
      color: white;
      font-size: 12px;
    }
  }
}
.HotList {
  li {
    display: flex;
    > div:last-child {
      flex: 1;
    }
    .Hot-index {
      flex-basis: 40px;
      align-self: center;
      text-align: center;
      color: #99999f;
      &.active {
        color: #d43c33;
      }
    }
  }
  .hotloading{
    padding: 10px 0 50px;
    color: #666;
    span:nth-child(1){
      animation: mymove 1s linear .1s infinite;
    }
     span:nth-child(2){
      animation: mymove 1s linear .2s infinite;
    }
     span:nth-child(3){
      animation: mymove 1s linear .4s infinite;
    }
  }
}
  @keyframes mymove
{
from {opacity:1;}
to {opacity:0;}
}
</style>